<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta>
    <title>用户注册</title>
    <!--    引入index.css样式表-->
    <link href="/WebContent/HTML/css/useregister.css" rel="stylesheet" type="text/css">
    <!--    引入commen.css样式表-->
    <link href="/WebContent/CSS/commend.css" rel="stylesheet">
    <!--    引入reset.css样式表-->
    <link href="/WebContent/CSS/reset.css" rel="stylesheet">
    <!--    引入JQuery-->
    <script src="/WebContent/HTML/js/jquery-3.4.1.js" rel="script"></script>
</head>
<body>
<header class="header">
    <a href="#" title="北方民族大学论坛用户注册入口">
        <div class="login">

        </div>
    </a>
    <div class="welcome">
        银川市北方民族大学论坛服务系统
    </div>
</header>

<article class="article">
    <section class="top clear">
        <div class="list">用户注册</div>
        <div class="tishi">
            已有账号，<a href="UserLogin.jsp" target="_self">请登录&gt;&gt;</a>
        </div>
    </section>
    <section class="All">
         <form action="/UserLogin" method="post" class="form clear">
             <input type="hidden" value="zc" name="logintype">
             <!--             用户名-->
             <div class="item">
                 <div class="user-list">
                     <div class="user-list-titel">用户名：</div>
                     <div class="user-list-cont">
                         <input type="text" name="username" id="username">
                     </div>
                 </div>
                 <span class="frindtest">
                     请输入你的姓名
                 </span>
             </div>
             <!--             密码-->
             <div class="item">
                 <div class="user-list">
                     <div class="user-list-titel">密码：</div>
                     <div class="user-list-cont">
                         <input type="password" name="password" id="password">
                     </div>
                 </div>
                 <span class="frindtest">
                      请输入你的密码
                 </span>
             </div>
             <!--             二次密码-->
             <div class="item">
                 <div class="user-list">
                     <div class="user-list-titel">确认密码：</div>
                     <div class="user-list-cont">
                         <input type="password" name="password1" id="password1">
                     </div>
                 </div>
                 <span class="frindtest">
                       请确认你的密码
                 </span>
             </div>
             <!--             邮箱-->
             <div class="item">
                 <div class="user-list">
                     <div class="user-list-titel">邮箱：</div>
                     <div class="user-list-cont">
                         <input type="text" name="email" id="email">
                     </div>
                 </div>
                 <span class="frindtest">
                      请输入邮箱
                 </span>
             </div>
             <!--             出生日期-->
             <div class="item">
                 <div class="user-list">
                     <div class="user-list-titel">出生日期：</div>
                     <div class="user-list-cont" style="border: none">
                         <select name="year" id="year" style="width: 52px">
                             <option values="1995">1995</option>
                             <option values="1996">1996</option>
                             <option values="1997">1997</option>
                             <option values="1998">1998</option>
                             <option values="1999">1999</option>
                             <option values="2000">2000</option>
                             <option values="2001">2001</option>
                             <option values="2002">2002</option>
                             <option values="2003">2003</option>
                             <option values="2004">2004</option>
                             <option values="2005">2005</option>
                             <option values="2006">2006</option>
                         </select>年
                         <select name="month" id="month" style="width: 30px">
                             <option values="1">1</option>
                             <option values="2">2</option>
                             <option values="3">3</option>
                             <option values="4">4</option>
                             <option values="5">5</option>
                             <option values="6">6</option>
                             <option values="7">7</option>
                             <option values="8">8</option>
                             <option values="9">9</option>
                             <option values="10">10</option>
                             <option values="11">11</option>
                             <option values="12">12</option>
                         </select>月
                         <select name="day" id="day">
                             <option values="1">1</option>
                             <option values="2">2</option>
                             <option values="3">3</option>
                             <option values="4">4</option>
                             <option values="5">5</option>
                             <option values="6">6</option>
                             <option values="7">7</option>
                             <option values="8">8</option>
                             <option values="9">9</option>
                             <option values="10">10</option>
                             <option values="11">11</option>
                             <option values="12">12</option>
                             <option values="13">13</option>
                             <option values="14">14</option>
                             <option values="15">15</option>
                             <option values="16">16</option>
                             <option values="17">17</option>
                             <option values="18">18</option>
                             <option values="19">19</option>
                             <option values="20">20</option>
                             <option values="21">21</option>
                             <option values="22">22</option>
                             <option values="23">23</option>
                             <option values="24">24</option>
                             <option values="25">25</option>
                             <option values="26">26</option>
                             <option values="27">27</option>
                             <option values="28">28</option>
                             <option values="29">29</option>
                             <option values="30">30</option>
                             <option values="31">31</option>
                         </select>日
                     </div>
                 </div>
                 <span class="frindtest">

                 </span>
             </div>

             <!--             联系方式-->
             <div class="item">
                 <div class="user-list">
                     <div class="user-list-titel">联系电话：</div>
                     <div class="user-list-cont">
                         <input type="text" name="tel" id="tel">
                     </div>
                 </div>
                 <span class="frindtest">
                      请输入你的电话
                 </span>
                 <span class="frindtest fr1" style="color: #1682c2;display: none">
                      正确
                 </span>
             </div>
             <button id="button">注册</button>
         </form>
    </section>
</article>
<script>
    $(document).ready(function () {
        //定义变量
        var usertest = false;
        var passtest = false;
        var pass1test = false;
        var emailtest = false;
        var teltest = false;
         //获得焦点事件
         $("input").click(function () {
              $(this).parent("div").parent("div").next("span").css("display","block")
         })
        //用户名失去焦点事件
        $("input#username").blur(function () {
            if($("#username").val()!=''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>用户名正确</font>")
                usertest = true;
            }else
            {
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>用户名错误</font>");
                usertest = false;
                return;
            }
        })
    //    密码失去焦点事件
        $("input#password").blur(function () {
            var sa = /^[a-zA-Z0-9]{1,16}$/;
            if($(this).val() == ''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: orange'>密码不能为空哦</font>")
                passtest = false;
                return;
            }
            else if(sa.test($(this).val())){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>密码格式正确</font>");
                passtest =true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>密码格式错误</font>");
                passtest = false;
                return;
            }
        })
        //    密码确认失去焦点事件
        $("input#password1").blur(function () {
            var sa = $("#password").val();
            if($(this).val() == ''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: orange'>密码不能为空哦</font>")
                pass1test = false;
                return;
            }
            else if(sa == $(this).val()){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>密码验证通过</font>");
                pass1test = true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>密码输入不一致</font>");
                pass1test = false;
                return;
            }
        })
        //    邮箱失去焦点事件
        $("input#email").blur(function () {
            var sb = /^[0-9a-zA-Z]+@+[0-9a-zA-Z]+\.com(\.cn)?$/;
            if(sb.test($(this).val())){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>邮箱验证通过</font>");
                emailtest = true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>邮箱格式错误</font>");
                emailtest = false;
                return;
            }
        })
        //    电话失去焦点事件
        $("input#tel").blur(function() {
            var sb = /^[0-9]{11}$/;
            if($(this).val() == ''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: orange'>电话号不能为空</font>")
                teltest = false;
                return;
            }
            else if(sb.test($(this).val())){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>电话验证通过</font>");
                teltest = true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>电话号位数错误</font>");
                teltest = false;
                return;
            }
        })
        //对表单元素做最后的判断
        $("form").submit(function () {
            if(usertest && passtest && pass1test && emailtest && teltest)
            {
                alert("注册成功！");
            }else{

                alert("注册失败！请检查您的数据是否有误");
                return false;
            }
        })


    })
</script>
</body>
</html>